<!DOCTYPE HTML> 
<html>
 <head>
  <meta charset="UTF-8"/>
  <title>RIGHT: R Interactive Graphics via HTml</title>
  <link rel="stylesheet" href="right.css"/>
 </head>
 <body>
<div id="head"  >
<div class="wrap">	
<h1><a id="mainTitle" href="right_index.html">RIGHT</a></h1>
<!-- <h2>designed by <a href="#">RIGHT</a></h2>-->
<div id="nav">
<ul>
<li><a href="right_index.html">Home</a></li>
<li><a href="about.html">About</a></li>
<li><a href="about.html">Tutorial</a></li>
<li><a href="about.html">Contact</a></li>
</ul>
</div>
</div>
</div>
  <div id="content">
   <div id="scatterContainer1" style="margin: 5px 5px 5px 5px; float: left; position : relative; border:1px solid black; background:  #eeeeee; " oncontextmenu="return false;"></div>
   <div id="scatterContainer2" style="margin: 5px 5px 5px 5px; float: left; position : relative; border:1px solid black; background:  #eeeeee; " oncontextmenu="return false;"></div>
   <div id="scatterContainer3" style="margin: 5px 5px 5px 5px; float: left; position : relative; border:1px solid black; background:  #eeeeee; " oncontextmenu="return false;"></div>
   <div id="histContainer4" style="margin: 5px 5px 5px 5px; float: left; position : relative; border:1px solid black; background:  #eeeeee; " oncontextmenu="return false;"></div>
   <div id="histContainer5" style="margin: 5px 5px 5px 5px; float: left; position : relative; border:1px solid black; background:  #eeeeee; " oncontextmenu="return false;"></div>
   <div id="histContainer6" style="margin: 5px 5px 5px 5px; float: left; position : relative; border:1px solid black; background:  #eeeeee; " oncontextmenu="return false;"></div>
  </div>
  <script src="kinetic-v4.3.1.js"></script>
  <script src="structure.js"></script>
  <script src="common.js"></script>
  <script src="scatter.js"></script>
  <script src="hist.js"></script>
  <script src="box.js"></script>
  <script src="node_event.js"></script>
  <script>createMainStructure('_diamonds.csv');</script>
  <script>
   var scatter1 = new Scatter(mainArr,{x: 'x', y: 'price', color: 'color', legend: 'left', width: 250, height: 250});
   scatter1.draw(1);
   eventTrigger(scatter1);
   var scatter2 = new Scatter(mainArr,{x: 'clarity', y: 'depth', color: 'depth', legend: 'right', width: 250, height: 250});
   scatter2.draw(2);
   eventTrigger(scatter2);
   var scatter3 = new Scatter(mainArr,{x: 'table', y: 'cut', color: 'cut', width: 250, height: 250});
   scatter3.draw(3);
   eventTrigger(scatter3);
   var hist4 = new Hist(mainArr,{bin: 0.5, x: 'color', width: 250, height: 250});
   hist4.draw(4);
   eventTrigger(hist4);
   var hist5 = new Hist(mainArr,{bin: 0.5, x: 'x', width: 250, height: 250});
   hist5.draw(5);
   eventTrigger(hist5);
   var hist6 = new Hist(mainArr,{bin: 0.5, x: 'cut', width: 250, height: 250});
   hist6.draw(6);
   eventTrigger(hist6);
  </script>
<div id="left">
 <h1>Search</h1>
  <ul>
   <li><a href="about.html">How To Search</a></li>					
  </ul>	 
 <script src="search.js"></script>
 <p>
  <form id="searchForm1">  
   <textarea id ="searchBox" name = "searchId"  style="height:50px;width:200px;" placeholder="Please input boolean statement..."  onkeydown="if (event.which || event.keyCode){if ((event.which == 13) || (event.keyCode == 13)) {booleanSearch(searchForm1);  printAns(); return false;}};"></textarea>
   <a id="searchBtn" href="#" class="myButton" onClick ="booleanSearch(searchForm1); printAns(); return false;">Search</a>	
   <a id="clearBtn" href="#" class="myButton"  onClick ="clearSearchBox(); return false;">Clear</a>
  </form>  
 </p>
 <h1>Hide & Reset</h1>
  <p>
   <a id="nodeHide" href="#" class="myButton" onClick ="hideSelected(); return false;">Hide</a>
   <a id="nodeReset" href="#" class="myButton" onClick ="resetSelected(); return false;">Reset</a>
  </p>		
 <h1>Other Functions</h1>			
 <p>
  <a id="showTable" href="#" class="myButton" onClick =" return false;">Show Table</a>	
  <a id="hideTable" href="#" class="myButton" onClick =" return false;">Hide Table</a>
 </p>	
 <p><a id="saveImg" href="#" class="myButton" onClick ="alert( return false;">Save as image</a></p>	
 <p><a id="sendImg" href="about.html" class="myButton" >Send an image to Email</a></p>	
 <p></p>	
</div>
<script src="table.js"></script>
<div id="footer">
 <div class="wrap">
  <div id="footnav">
   <ul>
    <li><a href="right_index.html">Home</a></li>
    <li><a href="about.html">About</a></li>
    <li><a href="about.html">Tutorial</a></li>
    <li><a href="about.html">Contact</a></li>
   </ul>
  </div>
  <div class="linksright">
   <h4><a href="#">Discover Right</a></h4>
    <ul>
     <li><a href="about.html">Why RIGHT?</a></li>
     <li><a href="about.html">What Does RIGHT Do?</a></li>
     <li><a href="about.html">Who Uses RIGHT?</a></li>
     <li><a href="about.html">Demo Gallaery</a></li>
    </ul>
   </div>
   <div class="linksright">
    <h4><a href="#">About Us</a></h4>
     <ul>
      <li><a href="about.html">News</a></li>
      <li><a href="about.html">Contact Us</a></li>
    </ul>
   </div><div class="linksright">
  <h4><a href="#">Follow Us</a></h4>
 <ul>
 <li><a href="about.html">Twitter</a></li>
<li><a href="about.html">Facebook</a></li>			
</ul>
</div>			
<div class="clearer">&nbsp;</div><br /><br />
<p class="foot">
Created by <a class="credit" href="about.html">RIGHT</a><br />
&copy; RIGHT, R-Interactive-Graphics-via-HTml 2013.
</p>
</div>
</div>
<script src="button_event.js"></script>
</body>
</html>
